<template>
    <div style="padding: 0 17px">
        <Breadcrumb/>
        <div style="display: flex;flex-wrap: wrap; margin-top: 20px;">
            <!--<el-button type="primary" style="margin-right: 15px" @click="addItem">新增-->
            <!--</el-button>-->
            <span style="min-width: 150px;margin-right: 15px">
        <OrganizationTree
                @change="load"
                @tree-select-changed="treeSelectChanged"
                v-model="selectedOrganizationId"
        />
      </span>
            <el-select
                    v-model="searchIsMisinformation"
                    placeholder="选择是否误报"
                    style="width: 150px;margin-right: 15px"
                    clearable
            >
                <el-option
                        v-for="item in isMisinformationOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                />
            </el-select>
            <el-select
                    v-model="searchWarnType"
                    placeholder="选择报警类型"
                    style="width: 150px;margin-right: 15px"
                    clearable
            >
                <el-option
                        v-for="item in warnTypeOptions"
                        :key="item.warnTypeNum"
                        :label="item.warnTypeName"
                        :value="item.warnTypeNum"
                />
            </el-select>
            <el-select
                    v-model="searchWarnState"
                    placeholder="选择报警状态"
                    style="width: 150px;margin-right: 15px"
                    clearable
            >
                <el-option
                        v-for="item in warnStateOptions"
                        :key="item.warnStateNum"
                        :label="item.warnStateName"
                        :value="item.warnStateNum"
                />
            </el-select>
            <el-select
                    v-model="searchIsDeal"
                    placeholder="选择处理情况"
                    style="width: 130px;margin-right: 15px"
                    clearable
            >
                <el-option
                        v-for="item in isDealOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                />
            </el-select>
            <el-input v-model="searchClientName" placeholder="单位名称"
                      style="width: 180px;height: 33px;margin-right: 15px;font-size: 13px;" clearable></el-input>
            <el-input v-model="searchName" placeholder="设备名称"
                      style="width: 180px;height: 33px;margin-right: 15px;font-size: 13px;" clearable></el-input>
            <el-input v-model="searchModel" placeholder="设备编号"
                      style="width: 180px;height: 33px;margin-right: 15px;font-size: 13px;" clearable></el-input>
            <div style="width: 350px;display: flex">
                <el-date-picker
                        v-model="searchData"
                        type="daterange"
                        range-separator="到"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="YYYY-MM-DD"
                />

            </div>
            <el-button type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;margin-left: 15px"
                       @click="load">搜索
            </el-button>
            <el-button type="success" style="" @click="importData">导入</el-button>
            <el-button type="success" style="" @click="exportData">导出</el-button>
        </div>

        <el-table ref="table" :data="tableData" :row-style="{ height: '77px' }" border highlight-current-row
                  style="width: calc(100vw - 240px);margin-top: 20px;height: 70vh;color: #909399;font-size: 15px;">
            <el-table-column prop="id" label="ID" width="100"/>
            <el-table-column prop="clientName" label="单位名称" width="250"/>
            <el-table-column prop="equipmentId" label="设备编号" width="180"/>
            <el-table-column prop="equipmentName" label="设备名称" width="180"/>
            <el-table-column prop="partModel" label="部件编号" width="110"/>
            <el-table-column prop="partName" label="部件名称" width="110"/>
            <el-table-column prop="warnTypeName" label="类型" width="110"/>
            <el-table-column prop="warnStateName" label="报警状态" width="110"/>
            <el-table-column prop="warnAddr" label="报警地点" width="110"/>
            <el-table-column prop="warnTime" label="报警时间" width="120"/>
            <el-table-column align="center" prop="isMisinformation" label="是否误报" width="100">
                <template #default="scope">
                    <el-tag type="danger" v-if="scope.row.isMisinformation === '0'">真实</el-tag>
                    <el-tag type="success" v-else-if="scope.row.isMisinformation === '1'">误报</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="isDeal" label="是否处理" width="100">
                <template #default="scope">
                    <el-tag type="danger" v-if="scope.row.isDeal === 0">未处理</el-tag>
                    <el-tag type="success" v-else-if="scope.row.isDeal === 1">已处理</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="teleNotification" label="消息通知" width="100">
                <template #default="scope">
                    <el-tag type="danger" v-if="scope.row.teleNotification === '0'">未通知</el-tag>
                    <el-tag type="success" v-else-if="scope.row.teleNotification === '1'">已通知</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="faultReport" label="故障上报" width="100">
                <template #default="scope">
                    <el-tag type="danger" v-if="scope.row.faultReport === '0'">未上报</el-tag>
                    <el-tag type="success" v-else-if="scope.row.faultReport === '1'">已上报</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="faultReportExpl" label="故障上报备注" width="110"/>
            <el-table-column align="center" prop="fieldSurvey" label="实地勘查" width="100">
                <template #default="scope">
                    <el-tag type="danger" v-if="scope.row.fieldSurvey === '0'">未勘查</el-tag>
                    <el-tag type="success" v-else-if="scope.row.fieldSurvey === '1'">已勘查</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="fieldSurveyExpl" label="实地勘查备注" width="110"/>
            <el-table-column align="center" prop="eliminHidDang" label="排除隐患" width="100">
                <template #default="scope">
                    <el-tag type="danger" v-if="scope.row.eliminHidDang === '0'">未排除</el-tag>
                    <el-tag type="success" v-else-if="scope.row.eliminHidDang === '1'">已排除</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="eliminHidDangExpl" label="排除隐患备注" width="110"/>
            <el-table-column prop="processingTime" label="处理时间" width="180"/>
            <el-table-column prop="createTime" label="创建时间" width="180"/>
            <el-table-column prop="warnExpl" label="备注" width="300"/>
            <el-table-column align="center" label="操作" fixed="right" width="180">
                <template v-slot="scope">
                    <el-button
                            v-if="scope.row.teleNotification === '0' && scope.row.faultReport === '0' && scope.row.fieldSurvey === '0' && scope.row.eliminHidDang === '0'"
                            type="primary" size="small" icon="Edit" @click="updateState(scope.row)">通知
                    </el-button>
                    <el-button
                            v-if="scope.row.teleNotification === '1' && scope.row.faultReport === '0' && scope.row.fieldSurvey === '0' && scope.row.eliminHidDang === '0'"
                            type="primary" size="small" icon="Edit" @click="updateState(scope.row)">上报
                    </el-button>
                    <el-button
                            v-if="scope.row.teleNotification === '1' && scope.row.faultReport === '1' && scope.row.fieldSurvey === '0' && scope.row.eliminHidDang === '0'"
                            type="primary" size="small" icon="Edit" @click="updateState(scope.row)">勘查
                    </el-button>
                    <el-button
                            v-if="scope.row.teleNotification === '1' && scope.row.faultReport === '1' && scope.row.fieldSurvey === '1' && scope.row.eliminHidDang === '0'"
                            type="primary" size="small" icon="Edit" @click="updateState(scope.row)">排除
                    </el-button>
                    <el-button v-if="showDetailTypes.includes(scope.row.equipmentType)" type="primary" size="small" icon="Edit" @click="goToAbout(scope.row)">详情</el-button>
                    <el-button type="primary" size="small" icon="Edit" @click="editItem(scope.row)">编辑</el-button>
                    <el-button v-if="this.userInformation.role === 1" type="danger" size="small" icon="Delete" @click="deleteItem(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="currentPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :background="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
        <el-dialog title="导入" v-model="dialogImportVisible" width="520px">
            <el-form label-position="right" label-width="100px">
                <el-form-item label="模板下载:" padding-top:10px>
                    <el-button type="primary" size="small" style="" @click="exportTemplate">报警记录</el-button>
                </el-form-item>
                <el-form-item label="文件" padding-top:-20px>
                    <el-upload :headers="headers"
                               :multiple="false"
                               :on-success="onUploadSuccess"
                               :on-error="onUploadError"
                               :action="serverIp+'/warn-record/importData'"
                               class="upload-demo">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogImportVisible = false">取消</el-button>
            </div>
        </el-dialog>
        <el-dialog title="报警操作" v-model="operationItemDialog" :close-on-click-modal="false" :show-close="false"
                   width="700">
            <el-form label-position="right" :inline="true" :model="form" ref="form" :rules="rules">
                <el-form-item
                        label="上报备注" prop="faultReportExpl">
                    <el-input disabled type="textarea" placeholder="上报备注" style="width: 600px"
                              v-model="form.faultReportExpl"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上报图片" prop="faultReportUrl">
                    <div style="display: flex; flex-wrap: wrap; padding: 10px; border-radius: 5px;"
                         v-if="form.faultReportUrl">
                        <template v-for="(url, index) in form.faultReportUrl.split(',')" :key="index">
                            <div style="margin-right: 10px; margin-bottom: 10px;"
                                 @click="handlePictureCardPreview(url)">
                                <img :src="url.trim()" alt="上报图片" style="max-height: 110px; border-radius: 4px;"/>
                            </div>
                        </template>
                    </div>
                </el-form-item>
                <el-form-item
                        label="勘查备注" prop="fieldSurveyExpl">
                    <el-input disabled type="textarea" placeholder="勘查备注" style="width: 600px"
                              v-model="form.fieldSurveyExpl"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="勘查图片" prop="fieldSurveyUrl">
                    <div style="display: flex; flex-wrap: wrap; padding: 10px; border-radius: 5px;"
                         v-if="form.fieldSurveyUrl">
                        <template v-for="(url, index) in form.fieldSurveyUrl.split(',')" :key="index">
                            <div style="margin-right: 10px; margin-bottom: 10px;"
                                 @click="handlePictureCardPreview(url)">
                                <img :src="url.trim()" alt="勘查图片" style="max-height: 110px; border-radius: 4px;"/>
                            </div>
                        </template>
                    </div>
                </el-form-item>
                <el-form-item
                        label="排除备注" prop="eliminHidDangExpl">
                    <el-input disabled type="textarea" placeholder="排除备注" style="width: 600px"
                              v-model="form.eliminHidDangExpl"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排除图片" prop="eliminHidDangUrl">
                    <div style="display: flex; flex-wrap: wrap; padding: 10px; border-radius: 5px;"
                         v-if="form.eliminHidDangUrl">
                        <template v-for="(url, index) in form.eliminHidDangUrl.split(',')" :key="index">
                            <div style="margin-right: 10px; margin-bottom: 10px;"
                                 @click="handlePictureCardPreview(url)">
                                <img :src="url.trim()" alt="排除图片" style="max-height: 110px; border-radius: 4px;"/>
                            </div>
                        </template>
                    </div>
                </el-form-item>
                <el-form-item label="是否误报" prop="state">
                    <el-select
                            v-model="form.isMisinformation"
                            placeholder="请选择是否误报"
                            style="width: 220px"
                    >
                        <el-option
                                v-for="item in isMisinformationOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="添加备注" prop="warnExpl">
                    <el-input type="textarea" placeholder="备注" style="width: 600px" v-model="form.warnExpl"
                              autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="reset('form')">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="处理操作" v-model="updateStateDialog" :close-on-click-modal="false" :show-close="false"
                   width="700">
            <el-form label-position="right" :inline="true" :model="form" ref="form" :rules="rules">
                <el-form-item
                        v-if="form.teleNotification === '1' && form.faultReport === '0' && form.fieldSurvey === '0' && form.eliminHidDang === '0'"
                        label="添加上报备注" prop="warnExpl">
                    <el-input type="textarea" placeholder="上报备注" style="width: 600px" v-model="form.faultReportExpl"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item
                        v-if="form.teleNotification === '1' && form.faultReport === '1' && form.fieldSurvey === '0' && form.eliminHidDang === '0'"
                        label="添加勘查备注" prop="warnExpl">
                    <el-input type="textarea" placeholder="勘查备注" style="width: 600px" v-model="form.fieldSurveyExpl"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item
                        v-if="form.teleNotification === '1' && form.faultReport === '1' && form.fieldSurvey === '1' && form.eliminHidDang === '0'"
                        label="添加排除备注" prop="warnExpl">
                    <el-input type="textarea" placeholder="排除备注" style="width: 600px" v-model="form.eliminHidDangExpl"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item
                        v-if="form.teleNotification === '1' && form.faultReport === '0' && form.fieldSurvey === '0' && form.eliminHidDang === '0'"
                        label="添加上报图片" prop="faultReportUrl">
                    <el-upload
                            :on-error="photoHandleError"
                            :action="'/api/files/upload'"
                            :on-success="faultReportUrlUpload"
                            list-type="picture-card"
                            :file-list="faultReportUrlList"
                    >
                        <template #tip>
                            <div class="el-upload__tip">
                                {{ photoType() }}文件应小于{{ fileSizeLimit() }}
                            </div>
                        </template>
                        <el-icon>
                            <Plus/>
                        </el-icon>
                        <template #file="{ file }" style="display:flex;text-align: center;justify-content: center">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
                                <span class="el-upload-list__item-actions">
                  <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file.url)"
                  >
                    <el-icon><zoom-in/></el-icon>
                  </span>
                  <span
                          class="el-upload-list__item-delete"
                          @click="handleRemove1(file)"
                  >
                    <el-icon><Delete/></el-icon>
                  </span>
                </span>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item
                        v-if="form.teleNotification === '1' && form.faultReport === '1' && form.fieldSurvey === '0' && form.eliminHidDang === '0'"
                        label="添加勘查图片" prop="fieldSurveyUrl">
                    <el-upload
                            :on-error="photoHandleError"
                            :action="'/api/files/upload'"
                            :on-success="fieldSurveyUrlUpload"
                            list-type="picture-card"
                            :file-list="fieldSurveyUrlList"
                    >
                        <template #tip>
                            <div class="el-upload__tip">
                                {{ photoType() }}文件应小于{{ fileSizeLimit() }}
                            </div>
                        </template>
                        <el-icon>
                            <Plus/>
                        </el-icon>
                        <template #file="{ file }" style="display:flex;text-align: center;justify-content: center">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
                                <span class="el-upload-list__item-actions">
                  <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file.url)"
                  >
                    <el-icon><zoom-in/></el-icon>
                  </span>
                  <span
                          class="el-upload-list__item-delete"
                          @click="handleRemove2(file)"
                  >
                    <el-icon><Delete/></el-icon>
                  </span>
                </span>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item
                        v-if="form.teleNotification === '1' && form.faultReport === '1' && form.fieldSurvey === '1' && form.eliminHidDang === '0'"
                        label="添加排除图片" prop="eliminHidDangUrl">
                    <el-upload
                            :on-error="photoHandleError"
                            :action="'/api/files/upload'"
                            :on-success="eliminHidDangUrlUpload"
                            list-type="picture-card"
                            :file-list="eliminHidDangUrlList"
                    >
                        <template #tip>
                            <div class="el-upload__tip">
                                {{ photoType() }}文件应小于{{ fileSizeLimit() }}
                            </div>
                        </template>
                        <el-icon>
                            <Plus/>
                        </el-icon>
                        <template #file="{ file }" style="display:flex;text-align: center;justify-content: center">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
                                <span class="el-upload-list__item-actions">
                  <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file.url)"
                  >
                    <el-icon><zoom-in/></el-icon>
                  </span>
                  <span
                          class="el-upload-list__item-delete"
                          @click="handleRemove3(file)"
                  >
                    <el-icon><Delete/></el-icon>
                  </span>
                </span>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="reset('form')">取 消</el-button>
                <el-button type="primary" @click="dealItem('form')">确 定</el-button>
            </div>
        </el-dialog>
        <div v-if="dialogVisible" class="modal" @click="closeModal">
            <div class="modal-content" @click.stop>
                <!-- Close button -->
                <button class="close-btn" @click="closeModal">X</button>
                <img :src="dialogImageUrl" alt="" class="enlarged-image"
                     :style="{ transform: 'scale(' + zoomLevel + ')', }" @wheel="handleZoom">
            </div>
        </div>
    </div>
</template>

<script>
    import request from "@/utils/request.js";
    import OrganizationTree from "@/components/OrganizationTree.vue";
    import Breadcrumb from "@/components/Breadcrumb.vue";
    import {serverIp} from "../../../public/static/config"
    import {fileSizeLimit, photoType} from "@/assets/globalJS.js";
    import {Delete, Download, Iphone, Plus, Position, ZoomIn} from "@element-plus/icons-vue";

    export default {
        name: "WarnRecord",
        components: {Breadcrumb, OrganizationTree, Plus, Delete, Download, ZoomIn, Iphone, Position},
        data() {
            return {
                zoomLevel: 1,
                serverIp,
                headers: {
                    token: JSON.parse(localStorage.getItem('user')).token,
                },
                dialogImportVisible: false,
                updateStateDialog: false,
                dialogImageUrl: "",
                dialogVisible: false,
                userInformation: JSON.parse(localStorage.getItem("user")),
                isMisinformationOptions: [
                    {
                        value: "0",
                        label: "真实"
                    }, {
                        value: "1",
                        label: "误报"
                    }],
                fieldSurveyOptions: [
                    {
                        value: "0",
                        label: "未勘查"
                    }, {
                        value: "1",
                        label: "已勘查"
                    }],
                eliminHidDangOptions: [
                    {
                        value: "0",
                        label: "未排除"
                    }, {
                        value: "1",
                        label: "已排除"
                    },
                ],
                isDealOptions: [
                    {
                        value: 0,
                        label: "未处理"
                    }, {
                        value: 1,
                        label: "已处理"
                    },
                ],
                teleNotificationOptions: [
                    {
                        value: "0",
                        label: "未通知"
                    }, {
                        value: "1",
                        label: "已通知"
                    },
                ],
                faultReportOptions: [
                    {
                        value: "0",
                        label: "未上报",
                    }, {
                        value: "1",
                        label: "已上报"
                    },
                ],
                warnTypeOptions: [],
                warnStateOptions: [],
                equipmentOptions: [],
                deviceBindingState: '',
                currentData: {},
                selectedState: '',
                selectedOrganizationId: JSON.parse(localStorage.getItem("user")).organization,
                searchClientName: '',
                searchName: '',
                searchModel: '',
                searchIsMisinformation: '',
                searchWarnType: "",
                searchWarnState: "",
                searchIsDeal: "",
                searchEquipment: "",
                searchData: [],
                tableData: [],  // 表单
                faultReportUrlList: [],
                fieldSurveyUrlList: [],
                eliminHidDangUrlList: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
                equipmentCurrentPage: 1,
                equipmentPageSize: 10,
                equipmentTotal: 0,
                operationItemDialog: false,  // 弹窗
                form: {},        // 编辑Sim信息赋值
                rules: {
                    isMisinformation: [
                        {required: true, message: '请选择是否误报', trigger: 'blur'},
                    ],
                },
                isEdit: false,
                showDetailTypes: [52, 51, 42, 53, 44, 45, 43], // 添加所有需要显示详情的设备类型值
            }
        },
        mounted() {
            // 初始化加载用户数据
            this.load()
            this.getWarnTypeOptions()
            this.getWarnStateOptions()
        },

        methods: {
            importData() {
                this.dialogImportVisible = true;
            },
            onUploadSuccess() {
                this.$message.success('上传成功');
                this.dialogImportVisible = false;
                location.reload();
            },
            onUploadError() {
                this.$message.error('上传失败');
            },
            // 模板下载
            exportTemplate() {
                window.location.href = '../xlsx/warnRecord.xlsx'
            },
            exportData() {
                let level = JSON.parse(localStorage.getItem("user")).level
                if (this.currentData.level !== undefined) {
                    level = this.currentData.level
                }
                if (this.searchIsMisinformation === undefined) {
                    this.searchIsMisinformation = ""
                }
                if (this.searchIsDeal === undefined) {
                    this.searchIsDeal = ""
                }
                if (this.searchWarnType === undefined) {
                    this.searchWarnType = ""
                }
                if (this.searchWarnState === undefined) {
                    this.searchWarnState = ""
                }
                let startTime = "", endTime = ""
                if (this.searchData !== null && this.searchData.length !== 0) {
                    startTime = this.searchData[0]
                    endTime = this.searchData[1]
                }
                let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
                } else {
                    clientIds = [];
                }
                window.open(serverIp + '/warn-record/export?clientName=' + this.searchClientName + "&equipmentName=" + this.searchName + "&equipmentId=" + this.searchModel +
                    "&level=" + level + "&organizationId=" + this.selectedOrganizationId + "&isMisinformation=" + this.searchIsMisinformation + "&warnTypeNum=" + this.searchWarnType + "&warnStateNum=" + this.searchWarnState +
                    "&isDeal=" + this.searchIsDeal + "&startTime=" + startTime + "&endTime=" + endTime + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds + "&id=" + 1);
            },
            // 搜索及初始化
            load() {
                let level = JSON.parse(localStorage.getItem("user")).level
                if (this.currentData.level !== undefined) {
                    level = this.currentData.level
                }
                if (this.searchIsMisinformation === undefined) {
                    this.searchIsMisinformation = ""
                }
                if (this.searchIsDeal === undefined) {
                    this.searchIsDeal = ""
                }
                if (this.searchWarnType === undefined) {
                    this.searchWarnType = ""
                }
                if (this.searchWarnState === undefined) {
                    this.searchWarnState = ""
                }
                let startTime = "", endTime = ""
                if (this.searchData !== null && this.searchData.length !== 0) {
                    startTime = this.searchData[0]
                    endTime = this.searchData[1]
                }
                let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
                } else {
                    clientIds = [];
                }
                let id = ""
                if (this.$route.query.id) {
                    id = this.$route.query.id
                }
                request.get("/warn-record/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&clientName=" + this.searchClientName + "&equipmentName=" + this.searchName + "&equipmentId=" + this.searchModel +
                    "&level=" + level + "&organizationId=" + this.selectedOrganizationId + "&isMisinformation=" + this.searchIsMisinformation + "&warnTypeNum=" + this.searchWarnType + "&warnStateNum=" + this.searchWarnState +
                    "&isDeal=" + this.searchIsDeal + "&startTime=" + startTime + "&endTime=" + endTime + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds + "&id=" + id).then(res => {
                    if (res.code === '200') {
                        for (let key in res.data) {
                            if (key === "record") {
                                this.tableData = res.data[key];
                                if (this.$route.query.id) {
                                    this.$nextTick(() => {
                                        this.$refs.table.setCurrentRow(this.tableData[0])
                                    })
                                }
                            } else if (key === "total") {
                                this.total = res.data[key];
                            }
                        }
                    } else {
                        this.$message.error("错误" + res.msg)
                    }
                })
            },
            // 新增报警
            addItem() {
                this.operationItemDialog = true
            },
            // 处理报警
            editItem(scope) {
                this.isEdit = true;
                Object.assign(this.form, scope)
                this.operationItemDialog = true
            },
            updateState(scope) {
                this.isEdit = true;
                Object.assign(this.form, scope)
                this.initfaultReportUrlList()
                this.initfieldSurveyUrlList()
                this.initeliminHidDangUrlList()
                this.updateStateDialog = true
            },
            // 选择绑定设备
            selectedEquipment(option) {
                this.form.equipmentInputStoreId = option.id
                this.form.equipmentId = option.equipmentId
            },
            // 编辑、新增确定按钮
            submitForm(val) {
                this.form.operatorId = JSON.parse(localStorage.getItem("user")).id
                this.$refs[val].validate((valid) => {
                    if (valid) {
                        request.post("/warn-record/edit", this.form).then(res => {
                            if (res.code === '200') {
                                this.$message({
                                    message: "成功",
                                    type: "success"
                                })
                                this.load()
                                if (!this.isEdit) {
                                    this.clearConditions()
                                }
                                this.reset(val)
                            } else {
                                this.$message.error("操作失败" + res.msg)
                            }
                        })
                    }
                })
            },
            // 清空查询条件
            clearConditions() {
                this.selectedState = ""
                this.selectedOrganizationId = JSON.parse(localStorage.getItem("user")).organization;
                this.search = "";
            },
            reset(val) {
                this.updateStateDialog = false;
                this.isEdit = false;
                this.operationItemDialog = false;
                this.form = {};
                this.$refs[val].clearValidate();
            },
            dealItem(val) {
                this.$confirm('是否确定?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$refs[val].validate((valid) => {
                        if (valid) {
                            if (this.form.teleNotification === "0" && this.form.faultReport === "0" && this.form.fieldSurvey === "0" && this.form.eliminHidDang === "0") {
                                this.form.teleNotification = "1"
                            } else if (this.form.teleNotification === "1" && this.form.faultReport === "0" && this.form.fieldSurvey === "0" && this.form.eliminHidDang === "0") {
                                this.form.faultReport = "1"
                            } else if (this.form.teleNotification === "1" && this.form.faultReport === "1" && this.form.fieldSurvey === "0" && this.form.eliminHidDang === "0") {
                                this.form.fieldSurvey = "1"
                            } else if (this.form.teleNotification === "1" && this.form.faultReport === "1" && this.form.fieldSurvey === "1" && this.form.eliminHidDang === "0") {
                                this.form.eliminHidDang = "1"
                            }
                            request.post("/warn-record/deal", this.form).then(res => {
                                if (res.code === '200') {
                                    this.$message({
                                        message: "成功",
                                        type: "success"
                                    })
                                    this.load()
                                    if (!this.isEdit) {
                                        this.clearConditions()
                                    }
                                    this.reset(val)
                                } else {
                                    this.$message.error("操作失败" + res.msg)
                                }
                            })
                        }
                    })
                });
            },
            // 删除确定弹窗
            deleteItem(scope) {
                this.$confirm('是否确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.delete("/warn-record/delete/" + scope).then(res => {
                        if (res.code === '200') {
                            this.$message.success("成功")
                            this.load()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                });
            },
            treeSelectChanged(data) {
                this.currentData = data
            },
            handleSizeChange(pageSize) {   // 改变当前每页的个数触发
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {  // 改变当前页码触发
                this.currentPage = pageNum
                this.load()
            },
            // 关闭下拉框的选项
            closeSelect() {
                this.$refs["selectRef1"].blur();
            },
            getWarnTypeOptions() {
                request.get("/warn-type/all").then(res => {
                    this.warnTypeOptions = res.data;
                })
            },
            getWarnStateOptions() {
                request.get("/warn-state/all").then(res => {
                    this.warnStateOptions = res.data;
                })
            },
            checkFileType(file) {
                const fileName = file.name
                const fileType = fileName.substring(fileName.lastIndexOf('.'))
                // '.xbm','.tif','pjp','.svgz','jpg','jpeg','ico','tiff','.gif','svg','.jfif','.webp','.png','.bmp','pjpeg','.avif'
                if (
                    fileType === '.xbm' ||
                    fileType === '.tif' ||
                    fileType === '.pjp' ||
                    fileType === '.svgz' ||
                    fileType === '.jpg' ||
                    fileType === '.jpeg' ||
                    fileType === '.ico' ||
                    fileType === '.tiff' ||
                    fileType === '.gif' ||
                    fileType === '.svg' ||
                    fileType === '.jfif' ||
                    fileType === '.webp' ||
                    fileType === '.png' ||
                    fileType === '.bmp' ||
                    fileType === '.pjpeg' ||
                    fileType === '.avif'
                ) {
                    // 不处理
                } else {
                    this.$message.error(
                        '不是常用图片格式文件,请上传正确的图片类型'
                    )
                    return false
                }
            },
            // photo上传
            photoType() {
                return photoType
            },
            fileSizeLimit() {
                return fileSizeLimit
            },
            photoHandleError() {
                this.$message.error("上传文件大小请勿超过" + fileSizeLimit)
            },
            handlePictureCardPreview(url) {
                this.dialogImageUrl = url;
                this.dialogVisible = true;
            },
            faultReportUrlUpload(response) {
                if (this.faultReportUrlList.length === 0) {
                    this.form.faultReportUrl = `/api/file/download${response}`
                } else {
                    this.form.faultReportUrl = this.form.faultReportUrl + `,/api/file/download${response}`
                }
                this.initfaultReportUrlList()
            },
            handleRemove1(file) {
                const index = this.faultReportUrlList.indexOf(file);
                if (index !== -1) {
                    const images = this.form.faultReportUrl.split(',');
                    images.splice(index, 1); // 删除选中的图片
                    this.form.faultReportUrl = images.join(','); // 更新 faultReportUrl 字符串
                    this.faultReportUrlList.splice(index, 1);
                }
            },
            initfaultReportUrlList() {
                this.faultReportUrlList = this.form.faultReportUrl ? this.form.faultReportUrl.split(',').map(url => {
                    return {url}
                }) : [];
            },

            handleRemove2(file) {
                const index = this.fieldSurveyUrlList.indexOf(file);
                if (index !== -1) {
                    const images = this.form.fieldSurveyUrl.split(',');
                    images.splice(index, 1); // 删除选中的图片
                    this.form.fieldSurveyUrl = images.join(','); // 更新 fieldSurveyUrl 字符串
                    this.fieldSurveyUrlList.splice(index, 1);
                }
            },
            fieldSurveyUrlUpload(response) {
                if (this.fieldSurveyUrlList.length === 0) {
                    this.form.fieldSurveyUrl = `/api/file/download${response}`
                } else {
                    this.form.fieldSurveyUrl = this.form.fieldSurveyUrl + `,/api/file/download${response}`
                }
                this.initfieldSurveyUrlList()
                console.log(this.fieldSurveyUrlList)
                console.log(this.form.fieldSurveyUrl)
            },
            initfieldSurveyUrlList() {
                this.fieldSurveyUrlList = this.form.fieldSurveyUrl ? this.form.fieldSurveyUrl.split(',').map(url => {
                    return {url}
                }) : [];
            },

            handleRemove3(file) {
                const index = this.eliminHidDangUrlList.indexOf(file);
                if (index !== -1) {
                    const images = this.form.eliminHidDangUrl.split(',');
                    images.splice(index, 1); // 删除选中的图片
                    this.form.eliminHidDangUrl = images.join(','); // 更新 eliminHidDangUrl 字符串
                    this.eliminHidDangUrlList.splice(index, 1);
                }
            },
            eliminHidDangUrlUpload(response) {
                if (this.eliminHidDangUrlList.length === 0) {
                    this.form.eliminHidDangUrl = `/api/file/download${response}`
                } else {
                    this.form.eliminHidDangUrl = this.form.eliminHidDangUrl + `,/api/file/download${response}`
                }
                this.initeliminHidDangUrlList()
                console.log(this.eliminHidDangUrlList)
                console.log(this.form.eliminHidDangUrl)
            },
            initeliminHidDangUrlList() {
                this.eliminHidDangUrlList = this.form.eliminHidDangUrl ? this.form.eliminHidDangUrl.split(',').map(url => {
                    return {url}
                }) : [];
            },
            closeModal() {
                this.dialogImageUrl = ''
                this.dialogVisible = false
                this.zoomLevel = 1; // 重置缩放级别
            },
            handleZoom(event) {
                event.preventDefault(); // 防止页面滚动

                // 根据滚轮方向调整缩放级别
                if (event.deltaY < 0) {
                    this.zoomLevel = Math.min(this.zoomLevel + 0.1, 3); // 最大缩放到3倍
                } else {
                    this.zoomLevel = Math.max(this.zoomLevel - 0.1, 1); // 最小缩放到1倍
                }
            },
            goToAbout(scope) {
                // 使用Map对象管理不同设备类型的路由配置
                const routeMap = new Map([
                    [52, { path: "/deviceSysData" }],
                    [51, { path: "/fireCockSysData" }],
                    [42, { path: "/currentDqData" }],
                    [53, { path: "/currentJhData" }],
                    [44, { path: "/currentLsData" }],
                    [45, { path: "/currentQgData" }],
                    [43, { path: "/currentYgData" }],
                ]);

                const routeConfig = routeMap.get(scope.equipmentType);
                if (routeConfig) {
                    this.$router.push({
                        ...routeConfig,
                        query: {
                            equipmentInputStoreId: scope.equipmentInputStoreId,
                            equipmentId: scope.equipmentId,
                            warnTime: scope.warnTime
                        }
                    });
                } else {
                    console.warn(`未配置设备类型 ${scope.equipmentType} 的路由`);
                }
            },
        }
    }
</script>

<style scoped>
    :deep(.el-table th .cell) {
        font-weight: 700
    }

    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw; /* 使用视口宽度 */
        height: 100vh; /* 使用视口高度 */
        background-color: rgba(0, 0, 0, 0.9); /* 更深的半透明背景 */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9000; /* 确保弹窗在最上层 */
    }

    .modal-content {
        position: relative; /* 相对定位，用于定位关闭按钮 */
        width: 100%; /* 弹窗内容宽度为100% */
        height: 100%; /* 弹窗内容高度为100% */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .close-btn {
        z-index: 9999;
        position: absolute;
        top: 20px; /* 离顶部距离 */
        right: 20px; /* 离右侧距离 */
        background-color: transparent; /* 背景透明 */
        border: none;
        font-size: 24px; /* 字体大小 */
        cursor: pointer;
        color: red; /* 关闭按钮颜色 */
    }

    .close-btn:hover {
        color: red; /* 鼠标悬停时颜色变化 */
    }

    .enlarged-image {
        max-width: 100%; /* 确保图片不会超出弹窗边界 */
        max-height: 100%; /* 确保图片不会超出弹窗边界 */
        border-radius: 0; /* 去掉图片的圆角 */
        transition: transform 0.3s ease; /* 变换过渡效果 */
    }
</style>
